import {
  AppBar,
  Toolbar,
  Typography,
  BottomNavigation,
  BottomNavigationAction,
  Box
} from "@mui/material";
import React, { useState } from "react";
import DirectionsRunIcon from "@mui/icons-material/DirectionsRun";
import SchoolIcon from "@mui/icons-material/School";
import PersonIcon from "@mui/icons-material/Person";
import { Map } from "@mui/icons-material";
import GoPage from "./Go";
import LearnPage from "./Learn";
import MePage from "./Me";
import LearningJourneyPage from "./LearningJourneyPage";

function HomePage() {
  const [tabValue, setTabValue] = useState(0);

  // Tab对应的标题
  const tabTitles = ["Go", "Journey", "Learn", "Me"];

  return (
    <>
      <AppBar position="fixed">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
            {tabTitles[tabValue]}
          </Typography>
        </Toolbar>
      </AppBar>
      <Box component="main">
        {tabValue === 0 && <GoPage />}
        {tabValue === 1 && <LearningJourneyPage />}   
        {tabValue === 2 && <LearnPage />}
        {tabValue === 3 && <MePage key={tabValue}/>}
      </Box>
      <BottomNavigation
        sx={{
          width: "100%",
          position: "fixed",
          bottom: 5,
          boxShadow: "0 -2px 4px rgba(0,0,0,0.1)",
        }}
        showLabels
        value={tabValue}
        onChange={(event, newValue) => {
            setTabValue(newValue);
        }}
      >
        <BottomNavigationAction
          label="Go"
          icon={<DirectionsRunIcon />}
        />
        <BottomNavigationAction
          label="Journey"
          icon={<Map />}
        />
        <BottomNavigationAction
          label="Learn"
          icon={<SchoolIcon />}
        />
        <BottomNavigationAction
          label="Me"
          icon={<PersonIcon />}
        />
      </BottomNavigation>
    </>
  );
}

export default HomePage;
